<template>
  <el-dialog
    v-model="visible"
    title="试题详情"
    width="70%"
    destroy-on-close
  >
    <div v-if="question" class="question-detail">
      <!-- 基本信息 -->
      <el-card class="info-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="试题ID">
            {{ question.id }}
          </el-descriptions-item>
          <el-descriptions-item label="题型">
            <el-tag :type="getQuestionTypeTagType(question.type)">
              {{ getQuestionTypeLabel(question.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="学科">
            {{ question.subjectName }}
          </el-descriptions-item>
          <el-descriptions-item label="分类">
            {{ question.categoryName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="难度">
            <el-rate
              :model-value="question.difficulty"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}星"
            />
          </el-descriptions-item>
          <el-descriptions-item label="分值">
            <el-tag type="warning">{{ question.score }}分</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(question.createdAt) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDate(question.updatedAt) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 试题内容 -->
      <el-card class="content-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>试题内容</span>
          </div>
        </template>
        
        <div class="question-title">
          <h3>{{ question.title }}</h3>
        </div>
        
        <div class="question-content">
          <div class="content-text">{{ question.content }}</div>
        </div>

        <!-- 选择题选项 -->
        <div v-if="['SINGLE_CHOICE', 'MULTIPLE_CHOICE'].includes(question.type)" class="options-section">
          <h4>选项：</h4>
          <div class="options-list">
            <div
              v-for="(option, index) in question.options"
              :key="index"
              class="option-item"
              :class="{ 'correct-option': option.correct }"
            >
              <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
              <span class="option-content">{{ option.content }}</span>
              <el-tag v-if="option.correct" type="success" size="small">正确答案</el-tag>
            </div>
          </div>
        </div>

        <!-- 判断题答案 -->
        <div v-if="question.type === 'TRUE_FALSE'" class="answer-section">
          <h4>正确答案：</h4>
          <el-tag :type="question.answer === 'true' ? 'success' : 'danger'" size="large">
            {{ question.answer === 'true' ? '正确' : '错误' }}
          </el-tag>
        </div>

        <!-- 填空题和问答题答案 -->
        <div v-if="['FILL_BLANK', 'ESSAY'].includes(question.type)" class="answer-section">
          <h4>参考答案：</h4>
          <div class="answer-content">{{ question.answer }}</div>
        </div>

        <!-- 解析 -->
        <div v-if="question.explanation" class="explanation-section">
          <h4>试题解析：</h4>
          <div class="explanation-content">{{ question.explanation }}</div>
        </div>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  modelValue: boolean
  question?: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  question: null
})

const emit = defineEmits<Emits>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const questionTypes = [
  { value: 'SINGLE_CHOICE', label: '单选题' },
  { value: 'MULTIPLE_CHOICE', label: '多选题' },
  { value: 'TRUE_FALSE', label: '判断题' },
  { value: 'FILL_BLANK', label: '填空题' },
  { value: 'ESSAY', label: '问答题' }
]

// 获取问题类型标签
const getQuestionTypeLabel = (type: string) => {
  const found = questionTypes.find(t => t.value === type)
  return found ? found.label : type
}

// 获取问题类型标签颜色
const getQuestionTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    'SINGLE_CHOICE': 'primary',
    'MULTIPLE_CHOICE': 'success',
    'TRUE_FALSE': 'warning',
    'FILL_BLANK': 'info',
    'ESSAY': 'danger'
  }
  return typeMap[type] || 'info'
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString('zh-CN')
}
</script>

<style scoped>
.question-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card,
.content-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.question-title h3 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.question-content {
  margin-bottom: 20px;
}

.content-text {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
  line-height: 1.6;
  color: #303133;
}

.options-section,
.answer-section,
.explanation-section {
  margin-top: 20px;
}

.options-section h4,
.answer-section h4,
.explanation-section h4 {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 16px;
  font-weight: 600;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.option-item.correct-option {
  background-color: #f0f9ff;
  border-color: #67c23a;
}

.option-label {
  font-weight: 600;
  color: #409eff;
  min-width: 24px;
}

.option-content {
  flex: 1;
  color: #303133;
  line-height: 1.4;
}

.answer-content,
.explanation-content {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid #67c23a;
  line-height: 1.6;
  color: #303133;
}

.explanation-content {
  border-left-color: #e6a23c;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}
</style>